<!-- 职级编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate?'选择客户':'选择客户'"
    :visible="visible"
    width="80%"
    :destroy-on-close="true"
    :lock-scroll="false"
    :close-on-click-modal="false"
    @open="querydata"
    @update:visible="updateVisible">
    <el-form
      :model="where"
      label-width="77px"
      class="ele-form-search">
      <el-row :gutter="15" style="padding-bottom: 0px;">
        <el-col :lg="5" :md="6">
          <el-form-item label="客户编码:">
            <el-input
              clearable
              v-model="where.custcode"
              placeholder=""/>
          </el-form-item>
        </el-col>
        <el-col :lg="5" :md="6">
          <el-form-item label="客户名称:">
            <el-input
              clearable
              v-model="where.custname"
              placeholder=""/>
          </el-form-item>
        </el-col>
<!--        <el-col :lg="5" :md="6">-->
<!--          <el-form-item label="批号:">-->
<!--            <el-input-->
<!--              clearable-->
<!--              v-model="where.vlotno"-->
<!--              placeholder=""/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :lg="5" :md="6">-->
<!--          <el-form-item label="仓库:">-->
<!--            <el-input-->
<!--              clearable-->
<!--              v-model="where.storcode"-->
<!--              placeholder=""/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :lg="4" :md="6">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              size="small"
              @click="querydata">查询
            </el-button>
            <el-button v-if="false"
                       type="primary"
                       icon="el-icon-check"
                       class="ele-btn-icon"
                       size="small"
                       @click="select">选择
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <ele-pro-table
      ref="table"
      :where="where"
      :needPage="false"
      :datasource="dataList"
      :columns="columns"
      :showTool="false"
      :toolbar="false"
      :selection.sync="selection"
      @row-click="handleRowClick"
      height="calc(100vh - 415px)">
      <!-- 表头工具栏 -->
      <template slot="toolbar" v-if="false">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="openEdit(null)"
        >NC回写
        </el-button>
        <el-button
          size="small"
          type="danger"
          icon="el-icon-delete"
          class="ele-btn-icon"
          @click="removeBatch"
          v-if="false"
        >删除
        </el-button>
      </template>
    </ele-pro-table>

    <div slot="footer">
      <el-button @click="updateVisible(false)">关闭</el-button>
      <el-button
        type="primary"
        @click="select"
      >确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'frmSelectInvcode',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    yybm: String
  },
  data() {
    return {
      // 表单数据
      //form: Object.assign({status: 1}, this.dataItem),
      url: '/kdl/nconhandlist',
      dataList:[],
      selection:[],
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'customercode',
          label: '客户编码',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center'
        },
        {
          prop: 'customername',
          label: '客户名称',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'left'
        },
        {
          prop: 'deliveryaddress',
          label: '企业地址',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center'
        },
        // {
        //   prop: 'vinvaliddate',
        //   label: '有效期',
        //   showOverflowTooltip: true,
        //   minWidth: 80,
        //   align: 'center'
        // },
        // {
        //   prop: 'vlotno',
        //   label: '批号',
        //   showOverflowTooltip: true,
        //   minWidth: 80,
        //   align: 'left'
        // },
        // {
        //   prop: 'nonhandnum',
        //   label: '数量',
        //   showOverflowTooltip: true,
        //   minWidth: 80,
        //   align: 'left'
        // },
        // {
        //   prop: 'uom',
        //   label: '单位',
        //   showOverflowTooltip: true,
        //   minWidth: 60,
        //   align: 'left'
        // },
        // {
        //   prop: 'storcode',
        //   label: '仓库',
        //   showOverflowTooltip: true,
        //   minWidth: 80,
        //   align: 'left'
        // },
        // {
        //   prop: 'storname',
        //   label: '仓库名称',
        //   showOverflowTooltip: true,
        //   minWidth: 100,
        //   align: 'left'
        // },
        // {
        //   prop: 'boxflag',
        //   label: '箱型',
        //   showOverflowTooltip: true,
        //   minWidth: 60,
        //   align: 'center'
        // },
        // {
        //   prop: 'boxno',
        //   label: '箱号',
        //   showOverflowTooltip: true,
        //   minWidth: 160,
        //   align: 'center'
        // },
      ],
      // 表格搜索条件
      where: {customertype: '销毁客户'},

      // 表单验证规则
      rules: {
        name: [
          {required: true, message: '请输入职级名称', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '请选择职级状态', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入排序号', trigger: 'blur'}
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  watch: {
    data() {
      if (this.yybm) {
        this.where.yybm=this.yybm;
        this.isUpdate = true;
      } else {
        this.where = {customertype: '销毁客户'};
        this.isUpdate = false;
      }
    }
  },
  methods: {
    querydata() {
      // if (!this.where.custcode && !this.where.invname && !this.where.vlotno) {
      //   this.$message.info("请输入药品编码或者药品名称或者批号后查询。");
      //   return;
      // }
      // if (this.where.invcode && this.where.invcode.length < 5)
      // {
      //   this.$message.info("请至少输入5位药品编码后查询。");
      //   return;
      // }
      var url = '/kdl/index?page=1&limit=20';
      if(this.where.custname)
      {
        url+="&custname="+this.where.custname;
      }
      if(this.where.custcode)
      {
        url+="&custcode="+this.where.custcode;
      }
      url+="&customertype="+this.where.customertype;
      this.$http.get(url).then(res=>{
        if (res.data.code === 0) {
          this.dataList = res.data.data.records;
        }
        else
        {
          this.$message.error(res.data.msg);
        }

      });

    },
    handleRowClick(row)
    {
      // if(this.selection.length > 0){
      //   let del_row = this.selection.shift()
      //   this.$refs.table.toggleRowSelection(del_row,false) //设置这一行取消选中
      // }
      const index = this.selection.findIndex(s=>(s.invcode == row.invcode && s.vlotno==row.vlotno));
      if(index>-1){
        this.$refs.table.toggleRowSelection(row, false);
        this.selection.splice(index,1)
      }else {
        this.selection.push(row);
        this.$refs.table.toggleRowSelection(row, true)
      }
    },
    select()
    {
      if(this.selection.length==0)
      {
        this.$message.info("请选择客户。");
        return;
      }
      this.$emit('update:visible', false);
      this.$emit('done',this.selection[0]);

    },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http[this.isUpdate ? 'put' : 'post'](this.isUpdate ? '/level/edit' : '/level/add', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
.ele-form-search{
  margin-top: -15px ;
  margin-bottom: -5px;
}
.el-form-item {
  margin-bottom: -5px !important;
}
</style>
